import React, { useState, useEffect, useImperativeHandle, forwardRef, useCallback } from 'react';
import { cloneDeep } from 'lodash';
import qs from 'qs';
import { Select, Button, Dropdown, message, Menu, Modal } from 'antd';
import MemberSelect from '@inbiz/basic/MemberSelect';
import { InbizIcon } from '@inbiz/utils';
import FutureAssignModal from '../../FutureAssignModal';
import MyFutureAssignModal from '../../MyFutureAssignModal';
import AssignedTaskModal from '../../AssignedTaskModal';
import MyReceiveTaskModal from '../../MyReceiveTaskModal';
import BatchApprovalModal from '../../BatchApprovalModal';
import ProcessIcon from '../../ProcessIcon';
import { observer } from '@formily/react';
import { TextWidget, getMessage } from '@inbiz/react';
import { getFormData, goQuickApproval } from '../../../utils';
import {
  getProcessInfo,
  setTask,
  getWillAssignList,
  getTasks,
  getAssignList,
  getApplyList,
  getProcessList,
} from '../../../service';
import type { SearchCondition, processStructure } from '../../../types';
import SelectAll from './ic-selectAll';
import quickApprovalIcon from '../icons/ic-20';
import '../style.less';

const { Option } = Select;
const { SubMenu } = Menu;

export default forwardRef((props: any, ref) => {
  const {
    tabsArr,
    choosedTabKey,
    choosedItems,
    setChoosedItems,
    $showTableInfo,
    showTableInfo,
    list,
    isEditor,
    userInfo,
    $selectedRowKeys,
    $list,
    getList,
    pageData,
    searchBarRef,
    afterOperation,
    rangeConfig,
    processGroup,
    setLoading,
    goView,
    goGetLogInfo,
    afterQuickApproval,
    ifQuickApproval,
    getGroup,
    configEvents,
  } = props;

  // 流程分组数据
  const [catogoryData, setCatogoryData] = useState<any[]>([{ id: '-1', name: 'processCenter.processGroup' }]);
  // 流程数据
  const [processData, setProcessData] = useState<any[]>([{ id: '-1', name: getMessage('processCenter.process') }]);
  // 查询条件
  const [searchCondition, setSearchCondition] = useState({
    processGroupName: '',
    processDefId: '',
    date: '-1',
    status: '-1',
    pGroupName: '-1',
    pDefId: '-1',
    dateName: '-1',
    statusName: '-1',
  });
  const [dateData, setDateData] = useState([{ id: '-1', name: 'processCenter.date', iconType: '' }]);
  const [statusData, setStatusData] = useState([{ id: '-1', name: 'processCenter.status', iconType: '' }]);
  const [list2, $list2] = useState<processStructure[]>([]);
  const [pageData2, $pageData2] = useState({
    pageIndex: 1,
    pageSize: 50,
    total: 0,
  });
  const [listLoading2, $listLoading2] = useState(false);
  const [currentSign, $currentSign] = useState('');
  const [willSign, $willSign] = useState('');
  const [allapplyList, $allapplyList] = useState([]);
  const [batchVisible, $batchVisible] = useState(false);
  const [setAll, $setAll] = useState(false);
  const [futureAssignVisible, $futureAssignVisible] = useState(false);
  const [myFutureAssignVisible, $myFutureAssignVisible] = useState(false);
  const [myAssignVisible, $myAssignVisible] = useState(false);
  const [myReceiveVisible, $myReceiveVisible] = useState(false);
  const [memberSelectVisible, $memberSelectVisible] = useState(false);
  const [selectedPeople, $selectedPeople] = useState([]);
  const [process, $process] = useState<any>([]);
  const [childhover, $childhover] = useState('');

  const initQuerySelect = async () => {
    setSearchCondition({
      processGroupName: '',
      processDefId: '',
      date: '-1',
      status: '-1',
      pGroupName: '-1',
      pDefId: '-1',
      dateName: '-1',
      statusName: '-1',
    });
    setCatogoryData([{ id: '-1', name: 'processCenter.processGroup' }]);
    setProcessData([{ id: '-1', name: 'processCenter.process' }]);
    setDateData([{ id: '-1', name: 'processCenter.date', iconType: '' }]);
    setStatusData([{ id: '-1', name: 'processCenter.status', iconType: '' }]);
    await searchApplyList(choosedTabKey);
    resetDate();
    resetStatus(choosedTabKey);
  };

  const standardData = (res: { details: { rows: any[]; currPage: any; pageSize: any; total: any; }; }, key: string) => {
    if (res && res.details && res.details.rows.length > 0) {
      $list2(res.details.rows);
      $pageData2({
        pageIndex: res.details.currPage,
        pageSize: res.details.pageSize,
        total: res.details.total,
      });
    } else {
      $list2([]);
      $pageData2({
        pageIndex: 1,
        pageSize: pageData2.pageSize,
        total: 0,
      });
    }
    $listLoading2(false);
  };

  // 搜索流程和分组
  const searchApplyList = async (key: string, callback?: Function) => {
    let type = '';
    switch (key) {
      case '2':
        type = 'inbox';
        break;
      case '3':
        type = 'APPLI';
        break;
      case '4':
        type = 'drafts';
        break;
      case '5':
        type = 'cctome';
        break;
      case '6':
        type = 'init';
        break;
      case '7':
        type = 'complete';
        break;
      case '8':
        type = 'archive';
        break;
      default:
        break;
    }
    const params = {
      userId: userInfo?.ID,
      type,
      groupType: 'Group',
      dptKey:
        rangeConfig == 'all' || processGroup?.selectedRows?.length == 0
          ? ''
          : processGroup?.groupGuid ?? '',
    };

    let _processData = await getGroup(params);
    if (_processData && _processData?.details && _processData?.details?.GroupData) {
      const arr = _processData.details.GroupData.map((item: any) => item?.children).flat();
      setCatogoryData([
        { id: '', name: 'processCenter.all', children: [...arr] },
        ..._processData?.details?.GroupData,
      ]);
      setProcessData([
        { id: '', name: 'processCenter.all', proLcon: 'font_family' },
        ...arr,
      ]);
      callback && callback();
    }
  }

  const getInitData = async () => {
    await searchApplyList(choosedTabKey);
  };

  const resetDate = () => {
    setDateData([
      {
        id: '',
        name: 'processCenter.all',
        iconType: 'icon-a-riqisuoyou',
      },
      {
        id: 'days',
        name: 'processCenter.days',
        iconType: 'icon-a-yitiannei',
      },
      {
        id: 'week',
        name: 'processCenter.week',
        iconType: 'icon-a-yizhounei',
      },
      {
        id: 'month',
        name: 'processCenter.month',
        iconType: 'icon-a-yiyuenei',
      },])
  };

  const resetStatus = (choosedTabKey: string) => {
    setStatusData(
      choosedTabKey == '2'
        ?
        [
          {
            id: '',
            name: 'processCenter.all',
            iconType: 'icon-a-suoyou',
          },
          {
            id: '10',
            name: 'processCenter.beenreturnsBack',
            iconType: 'icon-beituihui',
          },
          {
            id: '0',
            name: 'processCenter.approvaling',
            iconType: 'icon-a-shenpizhong',
          },
        ]
        :
        [
          {
            id: '',
            name: 'processCenter.all',
            iconType: 'icon-a-suoyou',
          },
          {
            id: '1',
            name: 'processCenter.complete',
            iconType: 'icon-zhuangtai-wancheng',
          },
          {
            id: '0',
            name: 'processCenter.approvaling',
            iconType: 'icon-a-shenpizhong',
          },
        ]
    )
  }

  useEffect(() => {
    resetDate();
    getInitData();
  }, []);

  useEffect(() => {
    resetStatus(choosedTabKey);
  }, [choosedTabKey])

  // 查询指派 待领
  const getList2 = (
    pageIndex: number,
    pageSize: number,
    type: string,
    value?: string,
    searchCondition?: SearchCondition,
  ) => {
    $listLoading2(true);
    let dptKey =
      rangeConfig == 'all' || processGroup?.selectedRows?.length == 0
        ? ''
        : processGroup?.groupGuid ?? '';
    switch (type) {
      case '1': // 指派
        // queryParameter 条件查询
        const aparams = getFormData(
          userInfo,
          pageIndex,
          pageSize,
          value,
          dptKey,
          '',
          searchCondition,
        );
        getAssignList(aparams).then((res) => {
          standardData(res, 2);
        });
        break;
      case '2': // 将来指派
        // queryParameter 条件查询
        const waparams = getFormData(
          userInfo,
          pageIndex,
          pageSize,
          value,
          dptKey,
          '',
          searchCondition,
        );
        getWillAssignList(waparams).then((res) => {
          standardData(res, 2);
        });
        break;
      case '3': // 待领
        // queryParameter 条件查询
        const reparams = getFormData(
          userInfo,
          pageIndex,
          pageSize,
          value,
          dptKey,
          '',
          searchCondition,
        );
        getTasks(reparams).then((res) => {
          standardData(res, 2);
        });
      default:
        break;
    }
  };

  // 设置当前指派
  const setAssign = async (selected: { id: string }[]) => {
    const arr = setAll ? list : choosedItems;
    const params = {
      delegateUserId: selected.map((item) => item.id).join(','),
      handelUserId: userInfo.ID,
      taskIds: arr.map((item: any) => item.taskId).join(','),
    };
    let _task = await setTask(params);
    afterOperation(_task, () => { });
    $setAll(false);
    $selectedPeople([]);
  };

  const signHover = (type: string) => {
    if (type == '1') {
      $currentSign('currentSign');
    } else if (type == '2') {
      $willSign('willSign');
    }
    $childhover('childhover');
  };

  // 修改条件查询
  const changeCondition = async (condition: any) => {
    setLoading(true);
    setSearchCondition({ ...condition });
    await getList(1, pageData.pageSize, choosedTabKey, searchBarRef?.current?.searchText, { ...condition });
    setLoading(false);
  };

  // 批量审批
  const batchApproval = () => {
    sessionStorage.setItem('batchApproval', 'batchApproval');
    if (choosedItems?.length > 5) {
      message.info(getMessage('processCenter.fiveDataToApprove'));
    }
    const arr = cloneDeep(choosedItems).slice(0, 5);
    const newArr: processStructure[] = [],
      oldArr: any[] = [];
    const taskIds = arr.map((item: any) => item.taskId).join(',');
    let routeId = '';
    setLoading(true);
    getProcessInfo({
      taskIds,
      inItiateApplication: false,
    }).then((res) => {
      let details = res?.details || [];
      if (details && details.length > 0) {
        for (let index = 0; index < arr.length; index++) {
          const element = arr[index];
          const theDetails = res.details.find((item: any) => item.taskId == element.taskId);
          if (theDetails) {
            if (!theDetails.formId) {
              if (theDetails?.url) {
                routeId = theDetails?.url;
              }
              element.queryData = {
                id: theDetails.businessKey,
                taskId: theDetails.taskId,
                processId: theDetails.processDefinitionId,
                instanceId: theDetails.processInstanceId,
                pageVersion: theDetails.pageVersion,
                formId: theDetails.pageId,
                routeId,
                pageId: theDetails.pageId,
                siteDomName: theDetails.siteDomName,
              };
              newArr.push(element);
            } else if (theDetails.formId) {
              oldArr.push({
                ...element,
                queryData: {
                  ...theDetails,
                },
              });
            }
          }
        }
        $process(newArr.concat(oldArr));
        $batchVisible(true);
      } else {
        message.warn(res?.message || '');
      }
      setLoading(false);
    }).catch((error) => {
      setLoading(false);
    });
  };

  // 批量审批
  const handleBatchClick = () => {
    if (choosedItems.length == 0) {
      return Modal.info({
        title: getMessage('processCenter.modalTiptitle'),
        content: getMessage('processCenter.selectRecord'),
        okText: getMessage('processCenter.known'),
      });
    } else {
      batchApproval();
    }
  };

  //导出
  const exportTable = async () => {
    if (isEditor) {
      return;
    };
    if (list.length == 0) {
      return Modal.info({
        title: getMessage('processCenter.modalTiptitle'),
        content: getMessage('processCenter.noexportdata'),
        okText: getMessage('processCenter.known'),
      });
    };
    const { processGroupName, processDefId, date, status } = searchCondition;
    const title = tabsArr?.find((item: { id: string; }) => item?.id == choosedTabKey)?.title || '';
    const params = {
      pageIndex: 1,
      pageSize: 999999,
      type: '',
      exHeader: 'q',
      queryParameter: searchBarRef?.current?.searchText,
      userId: userInfo?.ID,
      processGroupName: (processGroupName && processGroupName != '-1' ? processGroupName : ''),
      processDefId: (processDefId && processDefId != '-1' ? processDefId : ''),
      date: (date && date != '-1' ? date : ''),
      status: (status && status != '-1' ? status : ''),
      title: getMessage(title),
    };

    switch (choosedTabKey) {
      case '2':
        params.type = 'myInbox';
        break;
      case '3':
        params.type = 'application';
        break;
      case '5':
        params.type = 'cctome';
        break;
      case '6':
        params.type = 'Initiator';
        break;
      case '7':
        params.type = 'complete';
        break;
      case '8':
        params.type = 'archive';
        break;
      default:
        break;
    };
    const newParams = (await configEvents.current?.onExportParams?.(params)) || params;

    // _self参数不会打开新窗口
    // window.open(`${InbizConfig.HOST}/edoc2Flow-web/process/operation/ProcessListExport?${qs.stringify(newParams)}`, '_self')
    // const iframe = document.createElement('iframe')
    // iframe.src = `${InbizConfig.HOST}/edoc2Flow-web/process/operation/ProcessListExport?${qs.stringify(newParams)}`
    // iframe.style.display = 'none'
    // document.body.appendChild(iframe)

    // 同一使用了之前的下载方式
    if ('download' in document.createElement('a')) {
      // 非IE下载
      const elink = document.createElement('a');
      elink.style.display = 'none';
      // elink.href = `${InbizConfig.HOST}/edoc2Flow-web/process/operation/ProcessListExport?${qs.stringify(newParams)}`;
      elink.href = configEvents.current?.onExportRequest ? await configEvents.current?.onExportRequest(newParams as any) : `/edoc2Flow-web/process/operation/ProcessListExport?${qs.stringify(newParams)}`;
      document.body.appendChild(elink);
      elink.click();
      // URL.revokeObjectURL(elink.href) // 释放URL 对象
      document.body.removeChild(elink);
    } else {
      // IE10+下载
      // navigator.msSaveBlob(blob, fileName)
    }
  };

  const signHoverLeave = () => {
    $currentSign('');
    $willSign('');
    $childhover('');
  };

  // 选中 取消所有任务
  const toggleCheckAll = () => {
    if (isEditor) {
      return;
    }
    if (!showTableInfo) {
      const newList = list?.map((item: any) => ({
        ...item,
        checked: !Boolean(choosedItems.length == list.length),
      }));
      let _choosedItems = newList?.filter((item2: any) => item2?.checked);
      setChoosedItems(_choosedItems);
      $selectedRowKeys(_choosedItems?.map((item: any) => item.taskId));
      $list(newList);
    } else {
      if (choosedItems.length != list.length) {
        setChoosedItems(list);
        $selectedRowKeys(list?.map((item: any) => item.taskId));
      } else {
        setChoosedItems([]);
        $selectedRowKeys([]);
      }
    }
  };

  // 点击按钮
  const clickMenu = ({ key }: { key: string }) => {
    if (isEditor) {
      return;
    }
    switch (key) {
      case '1-1': // 当前选中任务
        if (choosedItems.length == 0) {
          return Modal.info({
            title: getMessage('processCenter.modalTiptitle'),
            content: getMessage('processCenter.selectRecord'),
            okText: getMessage('processCenter.known'),
          });
        } else {
          const haveSigned = choosedItems
            .filter((item: any) => item.taskState == 50)
            .map((ele: any) => ele.processInstanceId)
            .join(',');
          if (haveSigned.length) {
            return Modal.info({
              title: getMessage('processCenter.modalTiptitle'),
              content: `${getMessage('processCenter.instanceNumber')}: ${haveSigned}${getMessage(
                'processCenter.haveAssigned',
              )}`,
              onOk() { },
            });
          }
          $memberSelectVisible(true);
        }
        break;
      case '1-2': // 全部任务
        // 成员选择
        const haveSigned = list
          .filter((item: any) => item.taskState == 50)
          .map((ele: any) => ele.processInstanceId)
          .join(',');
        if (haveSigned.length) {
          return Modal.info({
            title: getMessage('processCenter.modalTiptitle'),
            content: `${getMessage('processCenter.instanceNumber')}: ${haveSigned}${getMessage(
              'processCenter.haveAssigned',
            )}`,
            onOk() { },
          });
        }
        $memberSelectVisible(true);
        $setAll(true);
        break;
      case '2-1': // 设置将来指派
        getApplyList({
          pageIndex: 1,
          pageSize: 9999,
          userId: userInfo?.ID,
          dptKey:
            rangeConfig == 'all' || processGroup?.selectedRows?.length == 0
              ? ''
              : processGroup?.groupGuid ?? '',
        }).then((res) => {
          $futureAssignVisible(true);
          if (res.details && res.details.rows) {
            $allapplyList(res.details.rows);
          } else {
            $allapplyList([]);
          }
        });
        break;
      case '2-2': // 我的将来指派
        getList2(1, pageData2.pageSize, '2', '', {
          processGroupName: '',
          processDefId: '',
          date: '',
          status: '',
        });
        $myFutureAssignVisible(true);
        break;
      case '3': // 已指派
        getList2(1, pageData2.pageSize, '1', '', {
          processGroupName: '',
          processDefId: '',
          date: '',
          status: '',
        });
        $myAssignVisible(true);
        break;
      default:
        break;
    }
  };

  const menu = (
    <Menu
      onClick={clickMenu}
      expandIcon={<InbizIcon type="icon-ic-page_turning_right" style={{ fontSize: 16 }} />}
    >
      <SubMenu
        title={getMessage('processCenter.currentAssign')}
        key="1"
        className={currentSign}
        onMouseEnter={() => signHover('1')}
        onMouseLeave={signHoverLeave}
      >
        <Menu.Item
          key="1-1"
          className="dropdownMenu"
          onMouseEnter={() => signHover('1')}
          onMouseLeave={signHoverLeave}
        >
          <TextWidget>processCenter.currentSelectTask</TextWidget>
        </Menu.Item>
        <Menu.Item
          key="1-2"
          className="dropdownMenu"
          onMouseEnter={() => signHover('1')}
          onMouseLeave={signHoverLeave}
        >
          <TextWidget>processCenter.allTask</TextWidget>
        </Menu.Item>
      </SubMenu>
      <SubMenu
        title={getMessage('processCenter.willAssign')}
        key="2"
        className={willSign}
        onMouseEnter={() => signHover('2')}
        onMouseLeave={signHoverLeave}
      >
        <Menu.Item
          key="2-1"
          className="dropdownMenu"
          onMouseEnter={() => signHover('2')}
          onMouseLeave={signHoverLeave}
        >
          <TextWidget>processCenter.setting</TextWidget>
        </Menu.Item>
        <Menu.Item
          key="2-2"
          className="dropdownMenu"
          onMouseEnter={() => signHover('2')}
          onMouseLeave={signHoverLeave}
        >
          <TextWidget>processCenter.muFutureassign</TextWidget>
        </Menu.Item>
      </SubMenu>
      <Menu.Item
        key="3"
        className="dropdownMenu"
        onMouseEnter={() => signHover('3')}
        onMouseLeave={signHoverLeave}
      >
        <TextWidget>processCenter.assignedTask</TextWidget>
      </Menu.Item>
    </Menu>
  );

  // 刷新
  const onRefresh = async () => {
    setLoading(true);
    await getList(pageData.pageIndex, pageData.pageSize, choosedTabKey, searchBarRef?.current?.searchText, { ...searchCondition });
    setLoading(false);
  };

  // 快速审批
  const quickApproval = () => {
    goQuickApproval(choosedItems, goView, goGetLogInfo, userInfo?.ID, () => {
      afterQuickApproval();
      onRefresh();
    });
  };

  // 向外暴露的方法
  useImperativeHandle(ref, () => ({
    searchCondition,
    setSearchCondition,
    resetSearchCondition: initQuerySelect,
    searchApplyList: async () => {
      await searchApplyList(choosedTabKey);
    }
  }));

  return (
    <div className="filterTab">
      <div className="condition">
        <Select
          onChange={(val) => {
            if (val) {
              const arr = catogoryData.find((ele) => ele.id == val).children || [];
              setProcessData([
                { id: '', name: 'processCenter.all', proLcon: 'font_family' },
                ...arr,
              ]);
            } else {
              const arr = catogoryData.find((ele) => !ele.id).children || [];
              setProcessData([
                { id: '', name: 'processCenter.all', proLcon: 'font_family' },
                ...arr,
              ]);
            }
            changeCondition({
              ...searchCondition,
              processGroupName: val,
              pGroupName: val,
              processDefId: '',
              pDefId: '',
            });
          }}
          defaultValue="-1"
          value={searchCondition.pGroupName}
          dropdownClassName="optionName"
        >
          {catogoryData.map((item) => {
            return (
              <Option value={item.id} key={item.id}>
                <InbizIcon
                  type="icon-liuchengfenzu"
                  style={{
                    fontSize: 12,
                    marginRight: 15,
                    color: 'var(--inbiz-color-primary)'
                  }
                  }
                />
                {item.count ? (
                  <span title={getMessage(item.name)}>
                    <TextWidget>{item.name || ''}</TextWidget>
                    {`(${item.count})`}
                  </span>
                ) : (
                  <span title={getMessage(item.name)}>
                    <TextWidget>{item.name || ''}</TextWidget>
                  </span>
                )}
              </Option>
            );
          })}
        </Select>
        <Select
          onChange={(val) => {
            changeCondition({
              ...searchCondition,
              processDefId: val,
              pDefId: val,
            });
          }}
          value={searchCondition.pDefId}
          defaultValue="-1"
          dropdownClassName="optionName"
        >
          {processData.map((item: any) => {
            return (
              <Option value={item.id} key={item.name + item.id}>
                <ProcessIcon
                  processIconInfo={item.proLcon ? item.proLcon.trim() : 'font_family'}
                  style={{ fontSize: 12, marginRight: 15 }}
                  imgStyle={{ width: 12, height: 12 }}
                />
                {item.count ? (
                  <>
                    <TextWidget>{item.name || ''}</TextWidget>
                    {`(${item.count})`}
                  </>
                ) : (
                  <TextWidget>{item.name || ''}</TextWidget>
                )}
              </Option>
            );
          })}
        </Select>
        {(choosedTabKey == '2' || choosedTabKey == '6') && (
          <Select
            onChange={(val) => {
              changeCondition({
                ...searchCondition,
                status: val,
                statusName: val,
              });
            }}
            value={searchCondition.statusName}
            defaultValue="-1"
            dropdownClassName="optionName"
          >
            {statusData.map((item: any) => {
              return (
                <Option value={item.id} key={item.id}>
                  <InbizIcon
                    type={item.iconType as string}
                    style={{ fontSize: 12, marginRight: 15, color: 'var(--inbiz-color-primary)' }}
                  />
                  <TextWidget>{item.name || ''}</TextWidget>
                </Option>
              );
            })}
          </Select>
        )}
        <Select
          onChange={(val) => {
            changeCondition({
              ...searchCondition,
              date: val,
              dateName: val,
            });
          }}
          value={searchCondition.dateName}
          defaultValue="-1"
          dropdownClassName="optionName"
        >
          {dateData.map((item: any) => {
            return (
              <Option value={item.id} key={item.id}>
                <InbizIcon
                  type={item.iconType as string}
                  style={{ fontSize: 12, marginRight: 15, color: 'var(--inbiz-color-primary)' }}
                />
                <TextWidget>{item.name || ''}</TextWidget>
              </Option>
            );
          })}
        </Select>
      </div>
      <div className="buttonList" id="buttonList">
        <div>
          <Button shape="round" onClick={onRefresh}>
            <InbizIcon type="icon-shuaxin" />
            <TextWidget>processCenter.refresh</TextWidget>
          </Button>
        </div>
        <div style={{ display: choosedTabKey == '2' ? 'block' : 'none' }}>
          <Button shape="round" onClick={toggleCheckAll}>
            <span className="anticon" role="img">
              {React.createElement(SelectAll)}
            </span>
            {choosedItems.length == list?.length && list?.length != 0 ? (
              <TextWidget>global.cancel</TextWidget>
            ) : (
              <TextWidget>processCenter.selectAll</TextWidget>
            )}
          </Button>
          <Dropdown
            overlay={menu}
            arrow={false}
            getPopupContainer={() => document.getElementById('buttonList') as HTMLElement}
          >
            <Button shape="round" className={`${childhover}`}>
              <InbizIcon type="icon-process-a-zu1944" />
              <TextWidget>processCenter.assign</TextWidget>
            </Button>
          </Dropdown>
          <Button
            shape="round"
            onClick={() => {
              if (isEditor) {
                return;
              }
              getList2(1, 50, '3', '', {
                processGroupName: '',
                processDefId: '',
                date: '',
                status: '',
              });
              $myReceiveVisible(true);
            }}
          >
            <InbizIcon type="icon-process-a-zu1945" />
            <TextWidget>processCenter.toClaim</TextWidget>
          </Button>
          {
            ifQuickApproval && <Button shape="round" onClick={quickApproval}>
              <span className="anticon" role="img">
                {React.createElement(quickApprovalIcon)}
              </span>
              <TextWidget>processCenter.quickApproval</TextWidget>
            </Button>
          }
          <Button shape="round" onClick={handleBatchClick}>
            <InbizIcon type="icon-process-a-zu1946" />
            <TextWidget>processCenter.batchApproval</TextWidget>
          </Button>
        </div>
        <div>
          {choosedTabKey != '4' && (
            <Button shape="round" onClick={exportTable}>
              <InbizIcon type="icon-ic-menu" />
              <TextWidget>processCenter.export</TextWidget>
            </Button>
          )}
        </div>
        <div
          onClick={() => {
            if (isEditor) {
              return;
            }
            sessionStorage.setItem('showTableInfo', !showTableInfo ? '1' : '0');
            let _infoList = list?.map((item1: any) => {
              return {
                ...item1,
                checked: false
              }
            });
            $list(_infoList);
            setChoosedItems([]);
            $selectedRowKeys([]);
            $showTableInfo(!showTableInfo);
          }}
          style={{ height: 32, cursor: 'pointer', display: 'flex', justifyContent: 'center', alignItems: 'center' }}
        >
          <InbizIcon
            type={showTableInfo ? 'icon-ic-modular' : 'icon-process-shituqiehuan'}
            style={{ fontSize: 24, color: '#666' }}
          />
        </div>
      </div>
      <MemberSelect
        visible={memberSelectVisible}
        config={{
          pageSize: 10,
          multiple: false,
          tabs: ['user'],
          selected: selectedPeople,
          onOk: (keys, selected, map) => {
            $selectedPeople(selected);
            const names = selected.map((item: any) => item.name).join(',');
            if (selected.length == 0) {
              return message.warn(getMessage('processCenter.selectBeenAssigned'));
            }
            Modal.confirm({
              title: getMessage('processCenter.modalTiptitle'),
              content: `${getMessage('processCenter.giveto')}${names}${getMessage(
                'processCenter.ma',
              )}?`,
              okText: getMessage('global.sure'),
              cancelText: getMessage('global.cancel'),
              onOk: async () => {
                $selectedRowKeys([]);
                setChoosedItems([]);
                setLoading(true);
                await setAssign(selected);
                await getList(
                  list?.length == 1 && pageData.pageIndex != 1
                    ? pageData.pageIndex - 1
                    : pageData.pageIndex,
                  pageData.pageSize,
                  '2',
                  '',
                  {
                    processGroupName: '',
                    processDefId: '',
                    date: '',
                    status: '',
                  },
                );
                await initQuerySelect();
                setLoading(false);
                $memberSelectVisible(false);
              },
            });
          },
          onCancel: () => {
            $selectedPeople([]);
            // $selectedRowKeys([]);
            $memberSelectVisible(false);
          },
        }}
      />
      {
        futureAssignVisible
        &&
        <FutureAssignModal
          visible={futureAssignVisible}
          $visible={$futureAssignVisible}
          applyList={allapplyList}
          userInfo={userInfo}
          choosedTabKey={choosedTabKey}
          searchApplyList={searchApplyList}
        />
      }
      {
        myFutureAssignVisible
        &&
        <MyFutureAssignModal
          visible={myFutureAssignVisible}
          $visible={$myFutureAssignVisible}
          getList={getList2}
          pageData={pageData2}
          $pageData={$pageData2}
          userInfo={userInfo}
          dataSource={list2}
          $list={$list2}
          loading={listLoading2}
        />
      }
      {
        myAssignVisible
        &&
        <AssignedTaskModal
          setLoading={setLoading}
          visible={myAssignVisible}
          $visible={$myAssignVisible}
          getList1={getList}
          getList2={getList2}
          pageData={pageData2}
          _pageData={pageData}
          $pageData={$pageData2}
          userInfo={userInfo}
          dataSource={list2}
          list={list}
          $list={$list2}
          loading={listLoading2}
          choosedTabKey={choosedTabKey}
          condition={searchCondition}
          searchApplyList={searchApplyList}
          initQuerySelect={initQuerySelect}
          $condition={setSearchCondition}
          $applyList={setProcessData}
          applyCatogory={catogoryData}
        />
      }
      {
        myReceiveVisible
        &&
        <MyReceiveTaskModal
          setLoading={setLoading}
          visible={myReceiveVisible}
          $visible={$myReceiveVisible}
          getList1={getList}
          getList2={getList2}
          pageData={pageData2}
          $pageData={$pageData2}
          userInfo={userInfo}
          dataSource={list2}
          $list={$list2}
          list={list}
          loading={listLoading2}
          choosedTabKey={choosedTabKey}
          condition={searchCondition}
          _pageData={pageData}
          searchApplyList={searchApplyList}
        />
      }
      {
        batchVisible
        &&
        <BatchApprovalModal
          setLoading={setLoading}
          applyCatogory={catogoryData}
          initQuerySelect={initQuerySelect}
          $condition={setSearchCondition}
          $applyList={setProcessData}
          applyList={processData}
          visible={batchVisible}
          $visible={$batchVisible}
          getList={getList}
          userInfo={userInfo}
          pageData={pageData}
          _process={process}
          $list={$list}
          list={list}
          $selectedRowKeys={$selectedRowKeys}
          condition={searchCondition}
          $choosedItem={setChoosedItems}
          choosedTabKey={choosedTabKey}
          searchApplyList={searchApplyList}
          searchText={searchBarRef?.current?.searchText}
        />
      }
    </div>
  );
});
